/* Navbar links */
.navbar-nav li.nav-item a {
    font-weight: bolder; /* Zorgt voor vetgedrukte tekst */
    letter-spacing: 2px; /* Vergroot de ruimte tussen letters */
    color: #ffffff !important;
}

/* Navbar achtergrondkleur */
.navbar, .navbar-nav:first-child {
    background: #0D4194; /* Zet de achtergrondkleur van de navbar en het eerste kind in de navbar */
}

/* Navbar met border onderaan */
.navbar, .navbar-expand-lg .mb-5 {
    border-bottom-style: solid;
    border-width: 2.5px;
    border-color: #0B2340; /* Geeft de navbar een groene onderkant */
    /* Verbetering: Gebruik consistentie in classnames. Er lijkt een spatie te ontbreken in .navbar-expand-lg mb-5. */
}

/* Primaire knop */
.btn-primary {
    color: #ffffff; /* Witte tekstkleur */
    background-color: #305CDE; /* Achtergrondkleur Royal blue */
    border-color: #305CDE; /* Borderkleur Royal blue */
}

/* Dropdown menu achtergrondkleur */
.dropdown-menu {
    background-color: #0D4194; /* Royal blue als achtergrondkleur voor dropdown */
}

/* Inloggen/Registreren knop achtergrondkleur */
.bg-body {
    background-color: #0D4194 !important;
}

/* Standaard stijlen voor video-achtergrond op desktops */
.video-background {
    background-position: center center; /* Centreert de achtergrondafbeelding */
    background-repeat: no-repeat; /* Voorkomt herhaling van de afbeelding */
    background-size: cover; /* Bedekt het hele element met de afbeelding */
    height: 90%; /* Stelt hoogte op 90% in */
    min-height: 250px; /* Minimale hoogte van 250px */
}

/* Responsieve stijlen voor mobiel */
@media (max-width: 768px) {
    .video-background {
        background-size: contain; /* Zorgt ervoor dat de afbeelding geheel wordt weergegeven zonder te worden afgesneden */
        height: 100%; /* Past de hoogte aan de inhoud aan */
    }
}

/* Schaduw onder video-achtergrond */
.video-background .shadow {
    position: absolute;
    width: 100%;
    height: 10px;
    bottom: -60px; /* Plaatst de schaduw 60px onder de video-achtergrond */
    box-shadow: 0 0 50px 110px #0000 !important; /* Zorgt voor een schaduweffect */
    /* Verbetering: De kleur #0000 lijkt op een ongeldige hex-kleur. Gebruik bijvoorbeeld rgba(0, 0, 0, 0) voor transparantie. */
}

/* Slider-knoppen */
.glide div[data-glide-el="controls"] .slider-btn {
    color: #305CDE; /* Zet tekstkleur op Royal blue */
    background: #000; /* Zwarte achtergrond */
}

/* Footer tekstkleur */
footer p {
    color: #fff; /* Witte tekstkleur voor de paragrafen in de footer */
}

/* Navbar-toggler (mobiele menu knop) */
.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: #305CDE; /* Royal blue achtergrondkleur */
    border: 1px solid #305CDE; /* Royal blue rand */
    border-radius: 0.25rem; /* Ronde hoeken */
    color: #000; /* Witte tekstkleur */
}

/* Footer en kaarten met border */
.footer, .card {
    border-style: solid; /* Omringt het element met een solide rand */
    border-width: 3px; /* Randbreedte */
    border-color: #0D4194; /* Marine randkleur */
    color: #fff; /* Witte tekstkleur */
}

/* Links in kaart met Royal blue kleur */
.card a {
    color: #305CDE; /* Zet de linkkleur op Royal blue */
}

/* Footer copyright tekst */
footer .copyright_text {
    color: #fff; /* Witte tekstkleur */
}

/* Verborgen knop (rating knop met groene kleur) */
button .btn.rating.btn-success {
    display: none; /* Verbergt de knop volledig */
}

/* Cookie melding achtergrondkleur */
.bg-dark {
    background-color: #0B2340 !important; /* Donkere achtergrondkleur met belangrijkheid */
}

/* Overige stijlen voor kaart */
.card {
    color: #000000 !important; /* kleur voor tekst in de kaart */
}

.nav-link {
    visibility: hidden;
}

.navbar-toggler {
    visibility: hidden;
}